<template>
  <div class="video_content">
    <video controls="controls" preload="auto" webkit-playsinline="webkit-playsinline" playsinline="playsinline" width="100%" height="auto" :src="info.videosources|https" :poster="info.coverurl" :style="{'height':videoHei}"></video>
    <div class="infos_detl">
      <p class="title_detl">{{info.title}}</p>
      <div class="from_time clearfix">
        <a v-if="!insq" :href="info.link" target="_blank" class="from_detl">From:{{info.publishername}}</a>
        <!--<span class="from_detl">From:{{info.publishername}}</span>-->
        <span class="time_detl">{{info.publishtime}}</span>
        <span v-if="insq" @click="favArticle()">
          <em :class="{'ico-heart-yell':!info.isfavor,'ico-heart-favoryell':info.isfavor}"></em>
        </span>
      </div>
      <div class="cons_detl" v-if="info.videowords">{{info.videowords[0].data}}</div>
    </div>
  </div>
</template>
<script>
import { FavorArticle } from '../../../common/api/userFavor'
import { mapGetters } from 'vuex'
export default {
  props: {
    info: Object
  },
  data() {
    return {
      isfixed: false,
      videoHei: ''
    }
  },
  created() {
    // console.log('bind scroll')
    window.addEventListener('scroll', this.fixScroll)
  },
  beforeDestroy() {
    // console.log('unbind scroll')
    window.removeEventListener('scroll', this.fixScroll)
  },
  mounted() {
    var deviceWid = document.documentElement.clientWidth || document.body.clientWidth
    this.videoHei = deviceWid * 0.696 + 'px'
  },
  computed: {
    ...mapGetters(['insq'])
  },
  methods: {
    fixScroll() {
      let sY = window.scrollY,
        vdo = document.querySelector('.video_content video'),
        rect = vdo.getBoundingClientRect(),
        elp = vdo && vdo.parentElement
      // console.log(window.scrollY, rect)
      if (sY > 0) {
        if (this.isfixed) return

        vdo.style = 'position:fixed;top:' + (rect.top + sY) + 'px;left:' + rect.left + 'px;width:' + rect.width + 'px;height:' + rect.height + 'px;'
        elp.style.paddingTop = rect.height + 'px'
        this.isfixed = true
      } else {
        vdo.style = 'position:;top:;left:;width:;height:;'
        elp.style.paddingTop = ''
        this.isfixed = false
      }
    },
    favArticle() {
      //   console.log(this.info)
      var postData = {
        ArticleId: this.info.id,
        IsCancel: this.info.isfavor
      }
      var errormsg = ''
      FavorArticle(postData)
        .then(res => {
          this.info.isfavor = !this.info.isfavor
          errormsg = (this.info.isfavor ? '' : '取消') + '收藏成功'
          this.toast(errormsg)
        })
        .catch(err => {
          console.log('err', err)
          this.toast(err.msg)
        })
    }
  }
}
</script>
<style scoped>
.video_content video {
  background-color: #101010;
  z-index: 9;
  max-height: 320px;
}

@media screen and (max-width: 768px) {
  .video_content video {
    max-height: 280px;
  }
}

.video_content .infos_detl {
  padding: 0.875rem;
  /*padding-top: 240px;*/
}

.video_content .title_detl {
  display: -webkit-box;
  font-size: 1.375rem;
  color: #000;
  margin: 0.875rem 0;
  max-height: 60px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.video_content .from_time {
  height: 40px;
  line-height: 40px;
  border-top: 1px solid #eee;
}

.video_content .from_time > span {
  float: left;
  font-size: 0.75rem;
}

.video_content .from_time > span:last-child {
  float: right;
  text-align: right;
}
</style>
